.container {
    display: flex;
    background:  linear-gradient(135deg,rgb(81,188,172),rgba(0,137,183));
}

@media screen and (min-width:0px) and (max-width:839px){
	.container {
        flex-direction: column;
    }
    .container .col-center {
        /*这里是上一次flex的布局*/
        flex: 1;
        order: -1;
    }
}

.container .col {
    display: flex;
    /*这里是上一次flex的布局*/
    flex: 1;
    flex-direction: column;
}

.container .col-center {
    display: flex;
    /*这里是上一次flex的布局*/
    flex: 2;
    flex-direction: column;
}

.container .col-center #title {
    height: 10vh;
    text-align: center;
    line-height: 10vh;
    font-family: '楷体';
    color: rgb(243,239,203);
    user-select: none;
}

.container .col-center #title h1 {
    margin: 0;
    font-size: 2rem;
}

.container .col-center #main-box {
    height: 80vh;
}

.container .col-center #ad {
    height: 10vh;
}

.container .box {
    padding: 3vh;
    border-radius: 5vh;
    box-shadow: 1px 2px 6px #888888;
    margin-bottom: 5vh;
    margin-left: 2vw;
}

.container .box:hover {
    box-shadow: 4px 2px 6px #888888;
}

.container .col #right-box1 {
    height: 40vh;
}

.container .col #right-box2 {
    height: 40vh;
}

.container .col #left-box1 {
    height: 40vh;
}

.container .col #left-box2 {
    height: 40vh;
}